<div ng-controller="TemplateEditorCtrl" ng-init="init()">
	<div class="dashboard-editor-header">
		<div class="dashboard-editor-title">
			<i class="icon icon-code"></i>
			Templating
		</div>

		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
			<div ng-repeat="tab in ['Variables', 'Add', 'Edit']"
				 data-title="{{tab}}">
			</div>
		</div>

	</div>

	<div class="dashboard-editor-body">

		<div ng-if="editor.index == 0">

			<div class="editor-row row">
				<div class="span8">
					<div ng-if="variables.length === 0">
						<em>No template variables defined</em>
					</div>
					<table class="grafana-options-table">
						<tr ng-repeat="variable in variables">
							<td style="width: 1%">
								<span class="template-variable">
									${{variable.name}}
								</span>
							</td>
							<td class="max-width" style="max-width: 200px;">
								{{variable.query}}
							</td>
							<td style="width: 1%">
								<a ng-click="edit(variable)"
								   class="btn btn-success btn-mini">
									<i class="icon-edit"></i>
									Edit
								</a>
							</td>
							<td style="width: 1%"><i
									ng-click="_.move(variables,$index,$index-1)"
									ng-hide="$first"
									class="pointer icon-arrow-up"></i></td>
							<td style="width: 1%"><i
									ng-click="_.move(variables,$index,$index+1)"
									ng-hide="$last"
									class="pointer icon-arrow-down"></i></td>
							<td style="width: 1%">
								<a ng-click="removeVariable(variable)"
								   class="btn btn-danger btn-mini">
									<i class="icon-remove"></i>
								</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
			<div class="row">
				<div class="editor-option">
					<div class="editor-row">
						<div class="editor-option">
							<label class="small">Variable name</label>
							<input type="text" class="input-medium"
								   ng-model='current.name' placeholder="name"
								   required></input>
						</div>
						<div class="editor-option">
							<label class="small">Type</label>
							<select class="input-medium" ng-model="current.type"
									ng-options="f for f in ['query', 'interval', 'custom']"
									ng-change="typeChanged()"></select>
						</div>
						<div class="editor-option"
							 ng-show="current.type === 'query'">
							<label class="small">Datasource</label>
							<select class="input input-medium"
									ng-model="current.datasource"
									ng-options="f.value as f.name for f in datasources"></select>
						</div>

						<editor-opt-bool text="Refresh on load"
										 show-if="current.type === 'query'"
										 tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
										 model="current.refresh"></editor-opt-bool>
					</div>

					<div ng-show="current.type === 'interval'">
						<div class="editor-row">
							<div class="editor-option">
								<label class="small">Values</label>
								<input type="text" class="input-xxlarge"
									   ng-model='current.query'
									   ng-blur="runQuery()"
									   placeholder="name"></input>
							</div>
						</div>
						<div class="editor-row">
							<editor-opt-bool text="Include auto interval"
											 model="current.auto"
											 change="runQuery()"></editor-opt-bool>
							<div class="editor-option" ng-show="current.auto">
								<label class="small">Auto interval steps
									<tip>How many steps, roughly, the interval
										is rounded and will not always match
										this count
										<tip>
								</label>
								<select class="input-mini"
										ng-model="current.auto_count"
										ng-options="f for f in [3,5,10,30,50,100,200]"
										ng-change="runQuery()"></select>
							</div>
						</div>
					</div>

					<div ng-show="current.type === 'custom'">
						<div class="editor-row">
							<div class="editor-option">
								<label class="small">Values seperated by
									comma</label>
								<input type="text" class="input-xxlarge"
									   ng-model='current.query'
									   ng-blur="runQuery()"
									   placeholder="1, 10, 20, myvalue"></input>
							</div>
						</div>
					</div>

					<div ng-show="current.type === 'query'">
						<div class="editor-row">
							<div class="editor-option form-inline">
								<label class="small">Variable values
									query</label>
								<input type="text" class="input-xxlarge"
									   ng-model='current.query'
									   placeholder="apps.servers.*"></input>
								<button class="btn btn-small btn-success"
										ng-click="runQuery()"
										bs-tooltip="'Execute query'"
										data-placement="right"><i
										class="icon-play"></i></button>
							</div>
						</div>

						<div class="editor-row" style="margin: 15px 0">
							<div class="editor-option form-inline">
								<label class="small">regex (optional, if you
									want to extract part of a series name or
									metric node segment)</label>
								<input type="text" class="input-xxlarge"
									   ng-model='current.regex'
									   placeholder="/.*-(.*)-.*/"></input>
								<button class="btn btn-small btn-success"
										ng-click="runQuery()"
										bs-tooltip="'execute query'"
										data-placement="right"><i
										class="icon-play"></i></button>
							</div>
						</div>

						<div class="editor-row" style="margin: 15px 0">
							<editor-opt-bool text="All option"
											 model="current.includeAll"
											 change="runQuery()"></editor-opt-bool>
							<div class="editor-option"
								 ng-show="current.includeAll">
								<label class="small">All format</label>
								<select class="input-medium"
										ng-model="current.allFormat"
										ng-change="runQuery()"
										ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
							</div>
							<div class="editor-option"
								 ng-show="current.includeAll">
								<label class="small">All value</label>
								<input type="text" class="input-xlarge"
									   ng-model='current.options[0].value'></input>
							</div>
						</div>
					</div>
				</div>
				<div class="editor-option">
					<div class="editor-row">
						<div class="editor-option">
							<label class="small">Variable values (showing
								20/{{current.options.length}})</label>
							<ul class="grafana-options-list">
								<li ng-repeat="option in current.options | limitTo: 20">
									{{option.text}}
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>

	</div>

	<div class="dashboard-editor-footer">
		<button type="button" class="btn btn-success pull-left"
				ng-show="editor.index === 2" ng-click="update();">Update
		</button>
		<button type="button" class="btn btn-success pull-left"
				ng-show="editor.index === 1" ng-click="add();">Add
		</button>
		<button type="button" class="btn btn-success pull-right"
				ng-click="dismiss();">Close
		</button>
	</div>
</div>

<!-- <div class="span4"> -->
<!-- 	<tip class="info&#45;box"> -->
<!-- 	<i class="icon&#45;question&#45;sign"></i> -->
<!-- 	The templating feature in Grafana lets easily create and manage templated queries. Templated queries use [[replacement]] syntax -->
<!-- 	to replace a part of your metric key or query. By using this feature you can make your dashboards more generic. You can for example create -->
<!-- 	a query replacement for your cluster name or server name. Then use that replacement in your metric queries and change -->
<!-- 	it globably for all graphs on the dashboard. -->
<!-- 	<br/><br/> -->
<!-- 	</tip> -->
<!-- </div> -->
